<template>
  <div id="index">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img class="banner" :src="item.image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 滚动分类 -->
    <van-swipe>
      <van-swipe-item v-for="(list, index) in lists" :key="index">
        <ul class="listul">
          <li class="listli" v-for="(item, ind) in list" :key="ind">
            <a :href="item.url">
              <img :src="item.image" alt="">
              <p>{{item.label}}</p>
            </a>
          </li>
        </ul>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
export default {
  data () {
    return {
      images: [],
      lists: []
    }
  },
  async created () {
    try {
      //获取轮播图数据
      const images = await this.axios.get('/api/banner')
      this.images = images.data

      //获取滚动分类数据
      const lists = await this.axios.get('/api/rollinglist')
      this.lists = lists.data
    } catch (error) {
      this.$toast.fail(error)
    }
  }

}
</script>
<style scoped>
.banner {
  display: block;
  width: 100%;
  height: 175px;
}
.listul {
  display: flex;
  flex-wrap: wrap;
}
.listli {
  width: 20%;
  justify-content: center;
}
.listli img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  padding: 5px 0;
}
.listli p {
  font-size: 14px;
  padding-bottom: 10px;
}
</style>
